<script setup>
import { ref, onMounted } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
import { add } from '@tools/common'
import { loadMicroApp } from 'qiankun'


const value1 = ref(0)
const addfun = () => {
  value1.value = add(value1.value++, value1.value)
}
const microApp1 = ref()
const microApp2 = ref()
const microApp3 = ref()
onMounted(async () => {
  microApp1.value = loadMicroApp({
    name: '@tools/demo1',
    entry: '//localhost:5174',
    container: '#app1Container',
    activeRule: '/',
    props: {
      parentStore: '11111',
      msg: '我是父应用传过来的值,传递给demo1应用'
    }
  })
  microApp2.value = loadMicroApp({
    name: '@tools/demo2',
    entry: '//localhost:5175',
    container: '#app2Container',
    activeRule: '/',
    props: {
      parentStore: '11111',
      msg: '我是父应用传过来的值,传递给demo2应用'
    }
  })
  microApp3.value = loadMicroApp({
    name: '@tools/demo3',
    entry: '//localhost:5176',
    container: '#app3Container',
    activeRule: '/',
    props: {
      parentStore: '11111',
      msg: '我是父应用传过来的值,传递给demo3应用'
    }
  })
  // await microApp1.value.mountPromise
})

const unLoadMicro = () => {
  microApp1.value.unmount()
  microApp2.value.unmount()
  microApp3.value.unmount()
}
</script>

<template>
  {{ value1 }}
  <button @click="addfun">add</button>
  <HelloWorld msg="Vite + Vue" />
  <div class="container">
    <div id="app1Container"></div>
    <div id="app2Container"></div>
  </div>
  <div id="app3Container"></div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#app1Container,
#app2Container {
  flex: 1;
}
</style>
